<template>
  <a-spin tip="Loading..." :spinning="spinning">
    <div class="operation-box">
      <a-form :form="form" @submit="handleSubmit">
        <a-form-item label="所属小区" v-bind="col">
          <a-select placeholder="请选择所属小区" v-decorator="['bd_info_id',{rules:[{required:true,message:'请选择小区'}]}]">
            <a-select-option v-for="(item,index) in bd_info" :key="index" :value="item.id">{{item.name}}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="楼宇名称" v-bind="col">
          <a-input placeholder="请输入楼宇名称" v-decorator="['name',{rules:[{required:true,message:'楼宇名称不可为空'}]}]"/>
        </a-form-item>
        <a-form-item label="单元数量" v-bind="col" v-if="id===0">
          <a-input-number :min="1" v-decorator="['unit_num',{rules:[{required:true,message:'单元数量不可为空'}]}]"/>
        </a-form-item>
        <a-form-item label="层数" v-bind="col" v-if="id===0">
          <a-input-number :min="1" v-decorator="['layers',{rules:[{required:true,message:'层数不可为空'}]}]"/>
        </a-form-item>
        <a-form-item label="楼宇状态" v-bind="col">
          <a-select placeholder="请选择楼宇状态" :options="[{value:1,label:'正常'},{value:0,label:'禁用'},{value:2,label:'拆除'},{value:3,label:'出售'},{value:4,label:'其它'}]" v-decorator="['status',{rules:[{required:true,message:'请楼宇状态'}],initialValue:1}]" />
        </a-form-item>
        <a-form-item label="状态说明" v-bind="col" v-show="form.getFieldValue('status') != 1">
          <a-input placeholder="请输入状态说明" v-decorator="['reason',{rules:[form.getFieldValue('status') != 1 ? {required:true,message:'状态说明不可为空'} : {}]}]"/>
        </a-form-item>
        <a-form-item label="楼宇类型" v-bind="col">
          <a-input placeholder="请输入楼宇类型，例如：高层/多层" v-decorator="['type']"/>
        </a-form-item>
        <a-form-item label="楼宇结构" v-bind="col">
          <a-input placeholder="请输入楼宇结构" v-decorator="['struct']"/>
        </a-form-item>
        <a-form-item label="楼宇朝向" v-bind="col">
          <a-input placeholder="请输入楼宇朝向" v-decorator="['direction']"/>
        </a-form-item>
        <a-form-item label="备注" v-bind="col">
          <a-input placeholder="请输入备注" v-decorator="['remarks']"/>
        </a-form-item>
        <a-form-item :wrapperCol="{xs:{span:24,offset:0},sm:{span:24,offset:8}}">
          <a-button type="primary" html-type="submit">保存</a-button>
          <a-button style="margin-left: 16px;" @click="() => { $router.go(-1) }">返回</a-button>
        </a-form-item>
      </a-form>
    </div>
  </a-spin>
</template>

<script>
import { mapGetters } from 'vuex'
  export default {
    name: 'data_building_operation',
    data() {
      return {
        bd_info:[{id:1,name:'测试小区'}], // 小区列表
        spinning:false,
        form:this.$form.createForm(this),
        col:{
          labelCol:{xs:{span:24},sm:{span:8}},
          wrapperCol:{xs:{span:24},sm:{span:10}}
        },
        id:'', // 楼宇id
      }
    },
    async mounted() {
      this.getBdList();
      let { id } = this.$route.params;
      this.id = id === 'add' ? 0 : id;
      if(!isNaN(this.id)){
        if(this.id !== 0) {
          let data = await this.getInfo(id);
          let { bd_info_id,name,unit_num,layers,status,reason,type,struct,direction,remarks} = data;
          this.form.setFieldsValue({bd_info_id,name,unit_num,layers,status,reason,type,struct,direction,remarks});
        }
      }else this.$router.go(-1);
    },
    methods:{
      ...mapGetters(['token', 'pmsArId', 'nowMg']),
      // 获取小区设置信息
      getInfo(id) {
        return new Promise((resolve,reject) => {
          this.axios({
            method:'post',
            url:'/community/get_building_info',
            params:{id,token:this.token()}
          }).then(res => {
            let { code,msg,data } = res;
            if(code === 0){
              resolve(data);
            }else this.$message.warning(msg);
          }).catch(err => {
            this.$message.error('服务器发生错误...');
          })
        })
      },
      getBdList(){
        this.axios({
            method:'get',
            url:'/community/get_bd_config_list',
            params:{token:this.token(),ar_id: this.pmsArId(),cm_mg_id: this.nowMg()}
          }).then(res => {
            let { code,msg,data } = res;
            if(code === 0){
             this.bd_info=data
            }else this.$message.warning(msg);
          }).catch(err => {
            this.$message.error('服务器发生错误...');
          })
      },
      // 提交信息
      handleSubmit(e) {
        e.preventDefault();
        this.form.validateFields((err, values) => {
          if (err) {
            for(let key in err){
              for(let item of err[key]['errors']) return this.$message.warning(item['message'],2);
            }
          }
          Object.assign(values,{token:this.token(),id:this.id});
          this.spinning = true;
          this.axios({
            method:'post',
            url:'/community/add_building_info',
            data:values,
          }).then(res => {
            this.spinning = false;
            if(res.code == 0){
              this.$message.success('保存成功',1);
              this.$router.push({name:'data_building_index'})
            }else this.$message.warning(res.msg);
          }).catch(() => {this.$message.error('服务器发生错误...',2);this.spinning = false;});
        });
      },
      // 图片大小验证
      checkImage(file) {
        if((file.size / 1024 / 1024) > 2) {
          this.$message.warning('图片最大不可超过2M',2);
          return false;
        }
      },
      // 上传图片
      imageUpload(info,text) {
        if (info.file.status === 'error') return this.$message.error(`${info.file.name}图片上传失败`);
        if (info.file.status === 'done') {
          console.log(info)
          const { file:{uid,response:{name,url}} } = info;
          if(text === 'logo_file') return this.logo_fileList.push({uid,name,url});
          if(text === 'bg_img') return this.bg_fileList.push({uid,name,url});
        }
        if (info.file.status === 'removed') {
          if(text === 'logo_file') this.logo_fileList = [];
          if(text === 'bg_img') this.bg_fileList = [];
        }
      },
      // 图片预览
      imgPreview(info) {
        this.previewImage = info.url || info.thumbUrl
        this.imagePreviewVisible = true
      },
      test(info){
        return info.fileList
        if(info.file.status === 'node') return info.file.uid;
      }
    }
  }
</script>

<style>

</style>
<style lang="less" scoped>
  .operation-box{
    background: #ffffff;
    padding:25px;
    box-sizing: border-box;
    .ant-upload-select-picture-card i {
      font-size: 32px;
      color: #999;
    }
    .ant-upload-select-picture-card .ant-upload-text {
      margin-top: 8px;
      color: #666;
    }
  }
</style>